﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>修改员工信息</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .text
        {
            width: 230px;
        }
        .entryExplanation
        {
            font-weight: bolder;
            font-size: 14px;
            background-color: #FFEC8B;
            display: inline;
        }
        .resend_recover
        {
            border: 1px solid #CCCCCC;
            margin-bottom: 15px;
            margin-top: 10px;
            padding: 10px;
        }
        .avatar
        {
            float: left;
            margin-right: 10px;
            padding: 10px;
            text-align: center;
            width: 110px;
            background: none repeat scroll 0 0 #EEEEEE;
        }
        .entryExplanation
        {
            font-weight: bolder;
            font-size: 14px;
            background-color: #FFEC8B;
            display: inline;
        }
        #formBasicInfo, #formPwd, #formContactInfo, #formGroup
        {
            margin-left: 140px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script type="text/javascript">
        //************* URL常量

        var URL_UPDATE_STAFF_INFO = '/Staff/DoUpdateStaffInfo';

        //************* 全局变量

        var g_Var = {
            'userId': null
        };
        var StaticResource = {};

        //************* 常量定义


        //************* Accessor访问器
        var EzAccessor = {};

        function CreateAccessor() {
            EzAccessor = CreateRealEzAccessor();
        }


        function CreateRealEzAccessor() {
            //实现服务器交互方法
            var realEzAccessor = {
                "getUserInfo": function () {
                    return <%= ViewData["UserInfo"]%>;
                },
            };
            return realEzAccessor;
        }


        //绑定个人信息
        var bindUserInfo = {
            bindBasicInfo: function(userInfo) {
                var name = userInfo.Name;
                var userName = userInfo.UserName;
                var deptId = userInfo.Dept.Id;
                var positionId = userInfo.Position.Id;

                $('#txtName').val(name);
                $('#cmbDept').val(deptId);
                $('#cmbPosition').val(positionId);
                $('#txtUserName').val(userName);

                //头像获取
                $('#imgAvatar').attr('src', "/core/headicon/" + userInfo.Id);
            },
            bindGroupInfo : function(groupInfo){
                for(var key in groupInfo){
                    var id = groupInfo[key].Id;
                    $('#' + id).attr('checked', true); 
                }
            },
            bindContactInfo: function(contactInfo) {
                var qqNumber= contactInfo.QqNumber;
                var mobile = contactInfo.MobileNo;
                var email =  contactInfo.MainEmail;
        
                $('#txtMobile').val(mobile);
                $('#txtQq').val(qqNumber);  
                $('#txtEmail').val(email);
            }
        }


        function getDeptListForArray(deptList) {
            var deptListForArray = [];
            for (var key in deptList) {
                var name = deptList[key].DeptName;
                var id = deptList[key].Id;

                deptListForArray.push({ 'text': name,
                    'value': id
                });
            }
            return deptListForArray;
        }


        function getPositionListForArray(positionList){
            var positionListForArray = [];
            for (var key in positionList) {
                var name = positionList[key].Description;
                var id = positionList[key].Id;

                positionListForArray.push({ 'text': name,
                    'value': id
                });
            }
            return positionListForArray ;
        }


        function getGroupListForArray(groupList){
            var groupListForArray = [];
            for (var key in groupList) {
                var name = groupList[key].Description;
                var id = groupList[key].Id;

                groupListForArray.push({ 'text': name,
                    'value': id
                });
            }
            return groupListForArray;
        }

        //绑定部门列表
        function bindDeptList(deptList) {
            var deptListForArray = getDeptListForArray(deptList);
            $('#cmbDept')
                .comboxBinding(deptListForArray, 'text', 'value');
        }

        //绑定职位
        function bindPositionList(positionList) {
            var positionListForArray = getPositionListForArray(positionList);
            $('#cmbPosition')
                .comboxBinding(positionListForArray , 'text', 'value');
        }

        //绑定用户组
        function bindGroupList(groupList){
            for(var key in groupList){
                var groupText = groupList[key].Description;
                var groupDom = $('<input type="checkbox"/>')
                    .val(groupList[key].Id)
                    .attr({id: groupList[key].Id});

                $('#cmbGroup').append(groupDom).append(groupText).append('<br />');
        
                if(groupText == "所有在职员工"  ){
                    $('#' + groupList[key].Id)
                        .attr({
                            'checked': true,
                            'disabled': true
                        })
                }
            }
        }



        //初始化页面
        function initPage() {
            CreateAccessor();
    
            EzDesk.Service.PermissionGroups_CacheSync(function (groups) {
                bindGroupList(groups);    
            });
            EzDesk.Service.AllPositions_CacheSync(function (positions) {
                bindPositionList(positions);
            });
            EzDesk.Service.AllDepts_CacheSync(function (depts) {
                bindDeptList(depts);
            });



            var userInfo = EzAccessor.getUserInfo();
            g_Var.userId = userInfo.Id;
            bindUserInfo.bindBasicInfo(userInfo);
    
            EzDesk.Service.GetUserContactInfo(function(contactInfo){
                bindUserInfo.bindContactInfo(contactInfo);
            },{userId: g_Var.userId})

            EzDesk.Service.UserPermissionGroups(function(groupInfo){
                bindUserInfo.bindGroupInfo(groupInfo);
            },{userId: g_Var.userId})


        }



        function InitValidation()
        {
            $.validator.addMethod('checkIsPasswordSame',
                function(value, element) { 
                    return $('#txtNewPwd').val() == $('#txtPwdConfirm').val();
                },'两次输入密码不一致');

            $("#formBasicInfo").validate({
                onkeyup:false,
                rules: {
                        name: {
				            required: true
				        }
                    },
                messages:
                    {
                        name: "请填写员工姓名"
                    }
            });

            $("#formPwd").validate({
                onkeyup:false,
                rules: {
                        userName: {
				            required: true
				        },
                        newPassword: {
                            required: true,
                            minlength: 6
                        },
                        confirmedPassword:{
                            checkIsPasswordSame: true
                        }
                    },
                messages:
                    {
                        userName: "用户名不能为空",
                        newPassword: { required: "密码不能为空", minlength: "密码不能少于6位" },
                        confirmedPassword: "两次输入密码不一致"
                    }
            });

        }



        function getGroupListChecked(){
            var idList = [];
            $('#cmbGroup input').each(function(index, item){
                if($(item).attr('checked')){
                    idList.push($(item).val());    
                }
            })

            return idList.join(',');
        }

        //初始化事件
        function initPageEvent() {
            $('#btnSubmitBasicInfo').click( function (){
                var validSuccess =  $("#formBasicInfo").valid();
                if(validSuccess){
                    $(document).ajaxBusy('begin');
                    $('#formBasicInfo').ajaxSubmit({
                        data: {
                            userId: g_Var.userId
                        },
                        success: function (statusInfo) {
                            $.displayStatusInfo(statusInfo);
                            $(document).ajaxBusy('end');

                        }
                    });
                }
            });
            $('#btnSubmitPwd').click( function (){
                var validSuccess =  $("#formPwd").valid();
                if(validSuccess){
                    $(document).ajaxBusy('begin');
                    $('#formPwd').ajaxSubmit({
                        data: {
                            userId: g_Var.userId
                        },
                        success: function (statusInfo) {
                            $.displayStatusInfo(statusInfo);
                            $(document).ajaxBusy('end');
                    
                        }
                    });
                }
            });

            $('#btnSubmitGroupInfo').click( function (){
                $(document).ajaxBusy('begin');
                $('#txt-groupList').val(getGroupListChecked());
                $('#formGroup').ajaxSubmit({
                    data: {
                        userId: g_Var.userId
                    },
                    success: function (statusInfo) {
                        $.displayStatusInfo(statusInfo);
                        $(document).ajaxBusy('end');
                
                    }
                });
            });


            $('#btnSubmitContactInfo').click( function (){
                $(document).ajaxBusy('begin');
                $('#formContactInfo').ajaxSubmit({
                    data: {
                        userId: g_Var.userId
                    },
                    success: function (statusInfo) {
                        $.displayStatusInfo(statusInfo);
                        $(document).ajaxBusy('end');
                
                        }
                    });
            });
        }

        $(function () {
            initPage();
            InitValidation();
            initPageEvent();
        });

    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <img src="../../Content/icons/edit_user.png" style="width: 48px; height: 48px;" alt="edit" />
        <span class="title">修改员工信息</span>
    </div>
    <div id="page-body" style="overflow: hidden;">
        <div class="resend_recover">
            <h3>
                我可以做些什么?</h3>
            <p style="font: 12px;">
                您可以修改员工的基本上信息：姓名，部门；也可以修改员工的登陆名和密码；以及联系方式。</p>
        </div>
        <div class="editMemberInfo">
            <div class="avatar">
                <img id="imgAvatar" width="100" height="100" src="" alt="" />
            </div>
            <form id="formBasicInfo" action="DoUpdateBasicInfo" method="post">
            <div class="content-section">
                <p class="entryExplanation">
                    基本信息</p>
                <div class="formBox">
                    <ul class="fieldslist">
                        <li>
                            <div class="l">
                                <label>
                                    姓名：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtName" name="name" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    部门：
                                </label>
                            </div>
                            <div class="r">
                                <select id="cmbDept" style="padding: 2px;" name="deptId" value="选择部门" class="text">
                                </select>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    职位：
                                </label>
                            </div>
                            <div class="r">
                                <select id="cmbPosition" style="padding: 2px;" name="positionId" value="选择职位" class="text">
                                </select>
                            </div>
                        </li>
                    </ul>
                    <div id="btnSubmitBasicInfo">
                        修改基本信息</div>
                    <script>
                        $(function () {
                            $("#btnSubmitBasicInfo").button({
                                icons: {
                                    primary: "ui-icon-circle-check"
                                },
                                text: true
                            });
                        });
                    </script>
                </div>
            </div>
            </form>
            <form id="formGroup" action="/Core/DoUpdateUserGroups" method="post">
            <div class="content-section">
                <p class="entry-explanation">
                    用户组分配</p>
                <div class="formBox">
                    <ul class="fieldslist">
                        <li>
                            <div class="l">
                                <label>
                                    用户组：
                                </label>
                            </div>
                            <div class="r">
                                <div id="cmbGroup" style="padding: 2px;">
                                </div>
                                <input type="hidden" id="txt-groupList" name="groupIdStrs" />
                            </div>
                        </li>
                    </ul>
                    <div id="btnSubmitGroupInfo">
                        修改用户组</div>
                    <script>
                        $(function () {
                            $("#btnSubmitGroupInfo").button({
                                icons: {
                                    primary: "ui-icon-circle-check"
                                },
                                text: true
                            });
                        });
                    </script>
                </div>
            </div>
            </form>
            <form id="formPwd" action="DoUpdatePwd" method="post">
            <div class="content-section">
                <p class="entryExplanation">
                    登录信息
                </p>
                <div class="formBox">
                    <ul class="fieldslist">
                        <li>
                            <div class="l">
                                <label>
                                    用户名：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtUserName" name="userName" readonly="readonly" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    原密码：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtOldPwd" name="oldPassword" type="password" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    新的密码：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtNewPwd" name="newPassword" type="password" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    确认密码：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtPwdConfirm" name="confirmedPassword" type="password" class="text" />
                            </div>
                        </li>
                    </ul>
                    <div id="btnSubmitPwd">
                        修改密码</div>
                    <script>
                        $(function () {
                            $("#btnSubmitPwd").button({
                                icons: {
                                    primary: "ui-icon-circle-check"
                                },
                                text: true
                            });
                        });
                    </script>
                </div>
            </div>
            </form>
            <form id="formContactInfo" action="doUpdateContactInfo" method="post">
            <div class="content-section">
                <p class="entryExplanation">
                    通讯方式
                </p>
                <div class="formBox">
                    <ul class="fieldslist">
                        <li>
                            <div class="l">
                                <label>
                                    电话：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtMobile" name="mobileNo" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    邮箱：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtEmail" name="mainEmail" class="text" />
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    QQ：
                                </label>
                            </div>
                            <div class="r">
                                <input id="txtQq" name="qqNumber" class="text" />
                            </div>
                        </li>
                    </ul>
                    <div id="btnSubmitContactInfo">
                        修改联系方式</div>
                    <script>
                        $(function () {
                            $("#btnSubmitContactInfo").button({
                                icons: {
                                    primary: "ui-icon-circle-check"
                                },
                                text: true
                            });
                        });
                    </script>
                </div>
            </div>
            </form>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_alert" style="display: none;">
    </div>
</asp:Content>
